<template>
    <!-- 暂时不可用 -->
    <view>
        <scroll-view :scroll-x="true" class="tabs-handler">
            <text :class="'tabs-item ' + (!currentRoom.id ? 'selected' : '')" @tap="onBindtapSelectRoomCommon">常用</text>
            <template v-for="(item, index) in roomList">
                <text :key="item.id" :class="'tabs-item ' + (item.id === currentRoom.id ? 'selected' : '')" @tap="onBindtapSelectRoom(item)">{{ item.roomName }}</text>
            </template>
        </scroll-view>
    </view>
</template>

<script>
// components/tabs/tabs.js
export default {
    data() {
        return {
            currentRoom: {
                id: false
            },

            roomList: []
        };
    },
    /**
     * 组件的属性列表
     */
    props: {},
    /**
     * 组件的方法列表
     */
    methods: {
        onBindtapSelectRoomCommon() {
            console.log('占位：函数 onBindtapSelectRoomCommon 未声明');
        },

        onBindtapSelectRoom(ev) {
            console.log('占位：函数 onBindtapSelectRoom 未声明',ev);
        }
    }
};
</script>
<style>
.tabs-handler {
    line-height: 72rpx;
    color: #88878c;
    white-space: nowrap;
    width: calc(100vw - 200rpx);
}

.tabs-handler .selected {
    color: #FF0025;
    font-weight: bold;
}

.tabs-item {
    padding-right: 40rpx;
}

.tabs-content {
    position: relative;
}
</style>
